<template>
  <div class="supplierAdd" v-loading="detailInfoShow">
    <!-- 筛选按钮 -->
    <div class="search-button" v-if="!contactAddShow">
      <el-button
        v-if="pageType !== 'detail'"
        class="btn save"
        @click="handleAddSave(supplierFormRef)"
        ><el-icon class="icon" color="#fff"> <Tickets /> </el-icon
        >保存</el-button
      >
      <el-button class="btn direction" @click="handleBack"
        ><el-icon class="icon" color="#fff"> <Back /> </el-icon>返回</el-button
      >
    </div>
    <el-collapse v-model="activeNames">
      <!-- 基础信息 -->
      <el-collapse-item name="1" v-if="!contactAddShow" class="transform-down">
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title"
            >{{
              pageType !== "detail"
                ? pageType === "add"
                  ? "新增"
                  : "编辑"
                : ""
            }}供应商信息</span
          >
        </template>
        <div class="supplier-info">
          <el-form
            :model="supplierForm"
            ref="supplierFormRef"
            :rules="queryRules"
            label-width="100px"
            v-enterToNext
            label-position="right"
            :disabled="pageType === 'detail'"
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="供应商编号：" label-width="120">
                  <el-input
                    disabled
                    v-model="supplierForm.supplierCode"
                    placeholder="自动获取"
                    clearable
                    class="search-input"
                    label-width="110"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供应商缩写：" label-width="150">
                  <el-input
                    v-model="supplierForm.supplierAbbreviation"
                    placeholder="自动生成"
                    clearable
                    disabled
                    class="search-input"
                    label-width="110"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="供应商简称："
                  prop="supplierShort"
                  label-width="120"
                >
                  <el-input
                    ref="refInputSecond"
                    v-model="supplierForm.supplierShort"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                    label-width="110"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="供应商全称："
                  label-width="110"
                  prop="supplierName"
                >
                  <el-input
                    v-model="supplierForm.supplierName"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="0">
              <el-col :span="7">
                <el-form-item
                  label="供应商地址："
                  label-width="120"
                  prop="region"
                >
                  <el-cascader
                  class="search-input"
                    v-model="supplierForm.region"
                    :options="provincesList"
                    @change="handlerregion"
                    :props="{
                      value: 'id',
                      label: 'name',
                      children: 'children',
                    }"
                    clearable
                  />
                  <!-- <el-select
                    filterable
                    style="width: 93px"
                    v-model="supplierForm.province"
                    placeholder="请选择"
                    clearable
                    class="search-select"
                    @change="handleProvince('province')"
                  >
                    <el-option
                      v-for="dict in provinceList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                  <el-select
                    filterable
                    style="width: 93px; margin: 0 5px"
                    v-model="supplierForm.city"
                    placeholder="请选择"
                    clearable
                    class="search-select"
                    @change="handleProvince('city')"
                  >
                    <el-option
                      v-for="dict in cityList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                  <el-select
                    filterable
                    style="width: 93px"
                    v-model="supplierForm.area"
                    placeholder="请选择"
                    clearable
                    class="search-select"
                  >
                    <el-option
                      v-for="dict in areaList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select> -->
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item
                  style="margin-left: -57px"
                  label="供应商详细地址："
                  prop="supplierAddress"
                  label-width="140"
                >
                  <el-input
                    style="width: 98%"
                    v-model="supplierForm.supplierAddress"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="供应商来源："
                  label-width="110"
                  prop="supplierSource"
                >
                  <el-select
                    v-model="supplierForm.supplierSource"
                    placeholder="请选择"
                    clearable
                    class="search-select"
                  >
                    <el-option
                      v-for="dict in sourceList"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item
                  label="首次合作日期："
                  label-width="120"
                  prop="firstCooperationDate"
                >
                  <el-date-picker
                    v-model="supplierForm.firstCooperationDate"
                    format="YYYY/MM/DD"
                    class="search-input"
                    value-format="YYYY-MM-DD"
                    type="date"
                    placeholder="请选择"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="主要供应产品：" label-width="150">
                  <el-input
                    v-model="supplierForm.productName"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item
                  label="营业执照："
                  prop="businessLicense"
                  label-width="120"
                >
                  <Upload
                    :fileList="supplierForm.businessLicense"
                    :isFull="true"
                    :isCanDelete="pageType == 'detail' ? false : true"
                    :disabled="pageType == 'detail'"
                    :showButton="true"
                    accept=".jpg,.png,.doc,.docx,.pdf"
                    @success="(result) => uploadSuccess(result, 1)"
                    @deleteFile="(result) => uploadRemove(result, 1)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="资质文件：" label-width="120">
                  <Upload
                    :fileList="supplierForm.certificatesFile"
                    :isFull="true"
                    :isCanDelete="pageType == 'detail' ? false : true"
                    :disabled="pageType == 'detail'"
                    :showButton="true"
                    accept=".jpg,.png,.doc,.docx,.pdf"
                    @success="(result) => uploadSuccess(result, 2)"
                    @deleteFile="(result) => uploadRemove(result, 2)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="业绩单：" label-width="120">
                  <Upload
                    :fileList="supplierForm.performanceSheet"
                    :isFull="true"
                    :isCanDelete="pageType == 'detail' ? false : true"
                    :disabled="pageType == 'detail'"
                    :showButton="true"
                    @success="(result) => uploadSuccess(result, 3)"
                    @deleteFile="(result) => uploadRemove(result, 3)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <!-- 添加联系人 -->
      <el-collapse-item
        name="2"
        style="position: relative"
        v-if="contactAddShow"
        class="transform-up"
      >
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">添加联系人</span>
        </template>
        <div class="supplier-info">
          <el-form
            :model="contactForm"
            ref="contactFormRef"
            :rules="queryContactRules"
            label-width="120px"
            v-enterToNext
          >
            <el-row>
              <el-col :span="6">
                <el-form-item label="联系人姓名：" prop="name">
                  <el-input
                    ref="refInput"
                    v-model="contactForm.name"
                    placeholder="请输入"
                    clearable
                    maxlength="10"
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系方式：" prop="phone">
                  <el-input
                    v-model="contactForm.phone"
                    placeholder="请输入"
                    clearable
                    maxlength="11"
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="联系人岗位："
                  prop="position"
                  label-width="150"
                >
                  <el-input
                    v-model="contactForm.position"
                    placeholder="请输入"
                    clearable
                    maxlength="20"
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item
                  label="联系人邮箱："
                  prop="email"
                  label-width="120"
                >
                  <el-input
                    v-model="contactForm.email"
                    placeholder="请输入"
                    clearable
                    maxlength="20"
                    class="search-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="备注：">
                  <el-input
                    v-model="contactForm.remarks"
                    placeholder="请输入"
                    clearable
                    class="search-input"
                    maxlength="2000"
                    @keyup.enter.stop="handleContactAdd(contactFormRef)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <!-- 联系人列表 -->
      <el-collapse-item
        name="3"
        style="position: relative"
        class="transform-down"
        disabled
      >
        <template #title>
          <span class="circle"></span>
          <span class="collapse-title">联系人列表</span>
          <div
            v-if="pageType !== 'detail' && !contactAddShow"
            class="nofixed-search-button button-position"
          >
            <el-button class="btn add" @click.stop="handleContactOperate"
              ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
              >添加</el-button
            >
          </div>
          <div
            class="nofixed-search-button button-position"
            v-else
            v-if="pageType !== 'detail'"
          >
            <el-button
              class="btn add"
              @click.stop="handleContactAdd(contactFormRef)"
              ><el-icon class="icon" color="#fff"> <Plus /> </el-icon
              >添加</el-button
            >
            <el-button class="btn direction" @click.stop="handleSupplierBack"
              ><el-icon class="icon" color="#fff"> <ArrowUp /> </el-icon
              >关闭</el-button
            >
          </div>
        </template>
        <div class="contact-info">
          <!-- 表格数据 -->
          <el-table
            :data="supplierForm.suppContactInfoVos"
            border
            :height="
              pageType === 'detail'
                ? '100%'
                : contactAddShow
                ? '420px'
                : '200px'
            "
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <!-- 操作模式 -->
            <el-table-column
              label="操作"
              align="center"
              :show-overflow-tooltip="true"
              width="100px"
              v-if="pageType !== 'detail'"
            >
              <!-- v-if="!operateType" -->
              <template #default="{ row, $index }">
                <div class="table-operate">
                  <el-icon
                    title="编辑"
                    color="#FFB700"
                    class="table-icon"
                    :size="20"
                    @click="handleOperate('edit', row, $index)"
                  >
                    <Edit />
                  </el-icon>
                  <el-icon
                    title="删除"
                    color="#E33838"
                    class="table-icon"
                    :size="20"
                    @click="handleOperate('delete', row, $index)"
                  >
                    <Delete />
                  </el-icon>
                </div> </template
            ></el-table-column>
            <el-table-column
              label="联系人姓名"
              prop="name"
              :show-overflow-tooltip="true"
              min-width="160"
            />
            <el-table-column
              label="联系方式"
              prop="phone"
              :show-overflow-tooltip="true"
              min-width="160"
            />
            <el-table-column
              label="联系人岗位"
              prop="position"
              :show-overflow-tooltip="true"
              min-width="160"
            />
            <el-table-column
              label="联系人邮箱"
              prop="email"
              :show-overflow-tooltip="true"
              min-width="160"
            />

            <el-table-column
              label="备注"
              prop="remarks"
              :show-overflow-tooltip="true"
              min-width="160"
            />
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
  <el-dialog
    :title="operateType !== 'edit' ? '添加联系人' : '编辑联系人'"
    v-model="operateDialogShow"
    style="margin-top: 20vh !important"
    width="1400px"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :close="handleSupplierBack"
  >
    <!-- class="supplier-info" -->
    <div>
      <el-form
        :model="contactForm"
        ref="contactFormRef"
        :rules="queryContactRules"
        label-width="120px"
        v-enterToNext
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="联系人姓名：" prop="name">
              <el-input
                ref="refInput"
                v-model="contactForm.name"
                placeholder="请输入"
                clearable
                maxlength="10"
                class="search-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式：" prop="phone">
              <el-input
                v-model="contactForm.phone"
                placeholder="请输入"
                clearable
                maxlength="11"
                class="search-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="联系人岗位："
              prop="position"
              label-width="150"
            >
              <el-input
                v-model="contactForm.position"
                placeholder="请输入"
                clearable
                maxlength="20"
                class="search-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人邮箱：" prop="email" label-width="120">
              <el-input
                v-model="contactForm.email"
                placeholder="请输入"
                clearable
                maxlength="20"
                class="search-input"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="备注：">
              <el-input
                v-model="contactForm.remarks"
                placeholder="请输入"
                clearable
                class="search-input"
                maxlength="2000"
                @keyup.enter.stop="handleContactAdd(contactFormRef)"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <!--  class="customer-info" -->

      <div class="dialog-footer">
        <el-button
          style="color: #fff; background-color: rgba(67, 207, 124, 1)"
          @click="handleContactAdd(contactFormRef)"
          >保存</el-button
        >

        <el-button style="background-color: #fff" @click="handleSupplierBack()"
          >取 消</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import Upload from "@/components/Upload/index";
import { getProvinceApi } from "@/api/information/customer";
import { getProvincesList } from "@/api/pub";
import {
  addScoreApi,
  getSupplierApi,
  editScoreApi,
} from "@/api/information/supplier";
import { getDictsApi } from "@/api/dict";
import { ElMessage, ElMessageBox } from "element-plus";
const emit = defineEmits([
  // 供应商新增组件显隐
  "supplierAddShow",
  // 更新供应商新增组件显隐
  "update:supplierAddShow",
  // 更新评价组件显隐
  "updateEvaluateAddShow",
  // 刷新父组件表格数据
  "refreshList",
]);
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});
// 折叠栏默认展开
const activeNames = ref(["1", "2", "3"]);
// 供应商表单引用
const supplierFormRef = ref();
// 联系人表单引用
const contactFormRef = ref();
// 联系人操作类型
const operateType = ref("");
// 联系人当前索引(编辑联系人使用)
const tableIndex = ref(null);
// 详情加载效果
const detailInfoShow = ref(false);
// 新增编辑弹窗显隐
const operateDialogShow = ref(false);
// 新增联系人表单显隐
const contactAddShow = ref(false);
// 输入框引用
const refInput = ref();
// 输入框引用2
const refInputSecond = ref();
//省市区校验规则
const provinceValidate = (rule, value, callback) => {
  // const { province, city, area } = supplierForm.value;
  // if (!province || !city || !area) {
  //   callback(new Error("请选择省市区"));
  // } else {
  //   callback();
  // }
  const { region } = supplierForm.value;
  console.log("region", region);
  if (region.length == 0) {
    callback(new Error("请选择省市区"));
  } else {
    callback();
  }
};
// 供应商表单数据模板
const supplierFormTemplate = {
  productName: "",
  supplierCode: "",
  supplierAbbreviation: "",
  supplierName: "",
  area: null,
  businessLicense: [],
  supplierAddress: "",
  suppContactInfoVos: [],
  city: null,
  supplierShort: "",
  supplierSource: null,
  province: null,
  performanceSheet: [],
  certificatesFile: [],
  remarks: "",
  supplierAbbreviation: "",
  firstCooperationDate: "",
  region: [],
};
// 联系人表单数据模板
const contactFormTemplate = {
  contactRoleName: "",
  supplierId: null,
  contactId: null,
  phone: "",
  name: "",
  position: "",
  email: "",
  remarks: "",
};
const data = reactive({
  // 供应商表单
  supplierForm: JSON.parse(JSON.stringify(supplierFormTemplate)),
  // 联系人表单
  contactForm: JSON.parse(JSON.stringify(contactFormTemplate)),
  // 供应商表单校验规则
  queryRules: {
    supplierShort: [
      { required: true, message: "请输入供应商简称", trigger: "blur" },
    ],
    supplierName: [
      { required: true, message: "请输入供应商全称", trigger: "blur" },
    ],
    supplierAddress: [
      { required: true, message: "请输入供应商详细地址", trigger: "blur" },
    ],
    supplierSource: [
      { required: true, message: "请选择供应商来源", trigger: "change" },
    ],
    businessLicense: [
      // { required: true, message: "请上传营业执照", trigger: "change" },
    ],
    region: [
      {
        required: true,
        validator: provinceValidate,
        message: "请选择省市区",
        trigger: "change",
      },
    ],
  },
  // 联系人表单校验规则
  queryContactRules: {
    name: [{ required: true, message: "请输入联系人姓名", trigger: "blur" }],
    phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
    position: [
      // { required: true, message: "请选择联系人岗位", trigger: "change" },
    ],
    // email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  },
  // 来源列表
  sourceList: [],
  // // 省列表
  // provinceList: [],
  // // 市列表
  // cityList: [],
  // // 区列表
  // areaList: [],
});
// 省市区列表
const provincesList = ref([]);
const { supplierForm, contactForm, queryRules, queryContactRules, sourceList } =
  toRefs(data);

/**
 * @description: 保存
 * @param {Object} supplierFormRef 供应商表单引用
 */
const handleAddSave = async (supplierFormRef) => {
  if (!supplierFormRef) return;
  await supplierFormRef.validate(async (valid, fields) => {
    if (valid) {
      ElMessageBox.confirm("确定保存以上数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "confirmBtnClass",
        cancelButtonClass: "cancelBtnClass",
      })
        .then(async () => {
          let res;
          if (!supplierForm.value.supplierId) {
            res = await addScoreApi(supplierForm.value);
          } else {
            res = await editScoreApi(supplierForm.value);
          }
          if (res.code === 200) {
            emit("update:supplierAddShow", false);
            emit("refreshList", false);
            ElMessage.success(res.msg);
            supplierForm.value = JSON.parse(
              JSON.stringify(supplierFormTemplate)
            );
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {});
    }
  });
};

/**
 * @description: 文件上传成功处理
 * @param {Object} response 文件信息
 * @param {Number} type 字段类型 1.营业执照；2.资质文件；3.业绩单。
 */
function uploadSuccess(response, type) {
  switch (type) {
    case 1:
      supplierForm.value.businessLicense.push({ ...response, businessType: 0 });
      break;
    case 2:
      supplierForm.value.certificatesFile.push({
        ...response,
        businessType: 1,
      });
      break;
    case 3:
      supplierForm.value.performanceSheet.push({
        ...response,
        businessType: 2,
      });
      break;
  }
}

/**
 * @description: 删除文件
 * @param {Number} index 当前文件索引
 * @param {Number} type 字段类型 1.营业执照；2.资质文件；3.业绩单。
 */
function uploadRemove(index, type) {
  switch (type) {
    case 1:
      supplierForm.value.businessLicense.splice(index, 1);
      break;
    case 2:
      supplierForm.value.certificatesFile.splice(index, 1);
      break;
    case 3:
      supplierForm.value.performanceSheet.splice(index, 1);
      break;
  }
}

/**
 * @description: 返回
 */
const handleBack = () => {
  if (props.pageType === "detail") {
    emit("updateEvaluateAddShow", false);
    emit("update:supplierAddShow", false);
    supplierForm.value = JSON.parse(JSON.stringify(supplierFormTemplate));
  } else {
    ElMessageBox.confirm("确定返回上一级吗?以上数据未保存将会丢失!", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      confirmButtonClass: "confirmBtnClass",
      cancelButtonClass: "cancelBtnClass",
    })
      .then(async () => {
        emit("updateEvaluateAddShow", false);
        emit("update:supplierAddShow", false);
        supplierForm.value = JSON.parse(JSON.stringify(supplierFormTemplate));
      })
      .catch(() => {});
  }
};

/**
 * @description: 新增、编辑联系人
 * @param {Object} contactFormRef 联系人表单引用
 */
const handleContactAdd = async (contactFormRef) => {
  if (!contactFormRef) return;
  await contactFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (operateType.value === "edit") {
        supplierForm.value.suppContactInfoVos[tableIndex.value] = JSON.parse(
          JSON.stringify(contactForm.value)
        );
      } else {
        supplierForm.value.suppContactInfoVos.push(
          JSON.parse(JSON.stringify(contactForm.value))
        );
      }
      contactForm.value = JSON.parse(JSON.stringify(contactFormTemplate));
      contactFormRef.resetFields();
      // nextTick(() => {
      //   refInput.value.focus();
      // });
      operateDialogShow.value = false;
    } else {
      console.log("error submit!");
    }
  });
};

/**
 * @description: 处理联系人操作
 */
const handleContactOperate = () => {
  operateDialogShow.value = true;
  operateType.value = "add";
  setTimeout(() => {
    refInput.value.focus();
  }, 500);
};

/**
 * @description: 联系人返回
 */
const handleSupplierBack = () => {
  contactForm.value = JSON.parse(JSON.stringify(contactFormTemplate));
  contactFormRef.value.resetFields();
  operateDialogShow.value = false;
  nextTick(() => {
    refInputSecond.value.focus();
  });
};

/**
 * @description: 联级处理省市区操作
 * @param {String} type 类型
 */
const handlerregion = (value) => {
  if (value) {
    supplierForm.value.province = value[0];
    supplierForm.value.city = value[1];
    supplierForm.value.area = value[2];
  } else {
    supplierForm.value.region = [];
    supplierForm.value.province = null;
    supplierForm.value.city = null;
    supplierForm.value.area = null;
  }
};

/**
 * @description: 处理省市区操作
 * @param {String} type 类型
 */
const handleProvince = (type) => {
  switch (type) {
    case "province":
      cityList.value = [];
      areaList.value = [];
      supplierForm.value.city = null;
      supplierForm.value.area = null;
      getProvinceApi(supplierForm.value.province).then((res) => {
        if (res.code === 200) {
          cityList.value = res.data;
        }
      });
      break;
    case "city":
      areaList.value = [];
      supplierForm.value.area = null;
      getProvinceApi(supplierForm.value.city).then((res) => {
        if (res.code === 200) {
          areaList.value = res.data;
        }
      });
      break;
  }
};

/**
 * @description: 处理联系人表格操作
 * @param {String} type 操作类型
 * @param {Object} row  当前行数据
 * @param {Number} tabIndex 表格当前索引
 */
const handleOperate = (type, row, tabIndex) => {
  if (type === "edit") {
    tableIndex.value = tabIndex;
    contactForm.value = JSON.parse(JSON.stringify(row));
    // contactAddShow.value = true;
    operateDialogShow.value = true;
    operateType.value = "edit";
    nextTick(() => {
      refInput.value.focus(); // 聚焦
    });
  } else {
    supplierForm.value.suppContactInfoVos.splice(tabIndex, 1);
  }
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = async (id) => {
  try {
    detailInfoShow.value = true;
    const res = await getSupplierApi(id);
    let array = [];
    if (res.supplierInfoRespVos.area) {
      array = [
        res.supplierInfoRespVos.province,
        res.supplierInfoRespVos.city,
        res.supplierInfoRespVos.area,
      ];
    }
    supplierForm.value = {
      ...res.supplierInfoRespVos,
      suppContactInfoVos: res.suppContactInfoVos,
      businessLicense: res.businessLicense,
      performanceSheet: res.performanceSheet,
      certificatesFile: res.certificatesFile,
      region: array,
    };

    // await getProvinceApi(supplierForm.value.province).then((res) => {
    //   if (res.code === 200) {
    //     cityList.value = res.data;
    //   }
    // });
    // await getProvinceApi(supplierForm.value.city).then((res) => {
    //   if (res.code === 200) {
    //     areaList.value = res.data;
    //   }
    // });
    detailInfoShow.value = false;
  } catch (error) {
    detailInfoShow.value = false;
  }
};

/**
 * @description: 获取字典
 */
async function getDicts() {
  // 来源列表
  await getDictsApi("erp_supplier_source").then((res) => {
    if (res.code === 200) {
      sourceList.value = res.data;
    }
  });
  await getProvincesList().then((res) => {
    if (res.code == 200) {
      provincesList.value = res.data;
    }
  });
  // // 省列表
  // await getProvinceApi(1).then((res) => {
  //   if (res.code === 200) {
  //     provinceList.value = res.data;
  //   }
  // });
}

onMounted(() => {
  getDicts();
  nextTick(() => {
    refInputSecond.value.focus(); // 聚焦
  });
});

defineExpose({
  handleDetailInfo,
});
</script>
<style lang="scss" scoped>
.supplierAdd {
  padding: 20px;
  width: 100%;
  height: 100%;
  .supplier-info {
    padding: 20px 10px 5px 10px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
  }

  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
  .search-input {
    width: 268px;
    height: 34px;
  }
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
}
</style>
